<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementui 学习</title>
    <script src="vue.js"></script>
    <script src="index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="index.css">
    <style>


    </style>



</head>

</head>
<body>

             <div id="app">
                 <el-container>
                     <el-main>
                 <el-table
                         :data="tableData"
                         style="width: 100%;height: 500px">
                     <el-table-column
                             prop="date"
                             label="日期"
                             width="380"
                              align="center">
                     </el-table-column>
                     <el-table-column
                             prop="name"
                             label="姓名"
                             width="380"
                     align="center">
                     </el-table-column>
                     <el-table-column
                             prop="address"
                             label="地址"
                     align="center">
                     </el-table-column>

                     <!--表格 删除或修改操作显示代码-->
                     <el-table-column label="操作" align="center">
                         <template slot-scope="scope">
                             <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                             <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                         </template>
                     </el-table-column>



                 </el-table>
                 <div align="center">
                     <!--分页栏-->
                       <el-pagination
                               background
                               @current-change="currentchange"
                               @prev-click="prevclick"
                               @next-click="nextclick"
                               @size-change="sizechange"
                               :current-page="paginationData.currentPage"
                               :page-sizes="paginationData.pageSizes"
                               :page-size="paginationData.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="paginationData.total">
                     </el-pagination>

                 </div>
                     </el-main>
                 </el-container>
             </div>

    <script>
           var  vm = new Vue({
               el:"#app",
               data:{
                  //  专门定义一个分页绑定数据
                 paginationData:{
                     currentPage:1,
                     pageSizes:[10,20,30],
                     pageSize:10,
                     total:400
                 },
                   tableData: [{
                       date: '2016-05-02',
                       name: '王小虎',
                       address: '上海市普陀区金沙江路 1518 弄'

                   }, {
                       date: '2016-05-04',
                       name: '王小虎',
                       address: '上海市普陀区金沙江路 1517 弄'
                   }, {
                       date: '2016-05-01',
                       name: '王小虎',
                       address: '上海市普陀区金沙江路 1519 弄'
                   }, {
                       date: '2016-05-03',
                       name: '王小虎',
                       address: '上海市普陀区金沙江路 1516 弄'
                   }, {
                       date: '2016-05-03',
                       name: '王小虎',
                       address: '上海市普陀区金沙江路 1516 弄'
                   }
                   ]
               },
            methods:{
                handleDelete:function (obj) {
                    //  删除之前 先要弹窗  给与用户确认提示
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        //  这里一般 发送删除请求 给后台  ajax形式
                        axios.get("e1.html").then((res)=>{
                            //  根据  res.flag   提示  删除成功信息
                              if(true){
                                  this.$message({
                                      type: 'success',
                                      message: '删除成功!'
                                  });
                              }
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
                   ,
                prevclick:function (obj) {
                    alert(obj+"---prevclick")
                },
                currentchange:function (obj) {
                    alert(obj+"---currentchange")
                },
                nextclick:function (obj) {
                    alert(obj+"---nextclick")
                },
                sizechange:function (obj) {
                    alert(obj+"---sizechange")
                },

            }
           })
    </script>
</body>
</html>